<template>
    <div class="roleList">
        <div class="addrole">
            <h1>角色管理</h1>
            <el-button type="primary" @click="handleAdd">添加角色</el-button>
        </div>
        <el-table :data="tableData" border height="60vh" style="width: 100%">
            <el-table-column prop="name" label="角色名称" width="150" />
            <el-table-column prop="description" label="描述" width="150" />
            <el-table-column label="状态" width="150">
                <template #default="{ row }">
                    <el-tag :type="row.isActive ? 'success' : 'danger'">
                        {{ row.isActive ? '启用' : '禁用' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createAt" label="创建时间" width="150" />
            <el-table-column prop="permissionList" label="权限列表" width="150" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button size="small" @click="handleEdit(row)"
                        style="background:#c2d7f7; color: whitesmoke;">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
const tableData = [
    {
        name: '管理员',
        description: '管理员',
        permissionList: '1233'
    },

]
</script>
<style scoped>
.roleList {
    width: 100vw;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    text-align: center;
}

.roleList h1 {
    margin-bottom: 20px;
    font-size: 30px;
    text-align: center;
    color: #333;
}

.el-table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #ebeef5;
    background-color: #ffffff;
    color: #303133;
    font-size: 14px;
}

:deep(.el-table th) {
    background-color: #c2d7f7 !important;
    color: #151515;
    font-weight: 600;
    text-align: center !important;
    padding: 16px 0;
    /* 增加行高 */
}

:deep(.el-table td) {
    text-align: center !important;
    padding: 16px 0;
    /* 增加行高 */
    border-bottom: 1px solid #ebeef5;
}

.addrole {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>